<template>
  <div class="dashboard-container">
    <a-row :gutter="20">
      <a-col :span="6" v-for="card in cards" :key="card.title">
        <a-card :class="['dashboard-card', card.type]" :bordered="false">
          <template #title>
            <div class="card-header">
              <span>{{ card.title }}</span>
              <component :is="card.icon" />
            </div>
          </template>
          <div class="card-content">
            <div class="number">{{ card.number }}</div>
            <div class="text">{{ card.text }}</div>
          </div>
        </a-card>
      </a-col>
    </a-row>
    
    <a-row :gutter="20" class="dashboard-row">
      <a-col :span="16">
        <a-card class="chart-card" :bordered="false">
          <template #title>
            <div class="card-header">
              <span>最近一周访问趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成图表库，如 ECharts -->
            <a-empty description="暂无数据" />
          </div>
        </a-card>
      </a-col>
      
      <a-col :span="8">
        <a-card class="notice-card" :bordered="false">
          <template #title>
            <div class="card-header">
              <span>系统公告</span>
            </div>
          </template>
          <a-timeline>
            <a-timeline-item 
              v-for="(activity, index) in activities" 
              :key="index"
              :color="index === 0 ? 'blue' : 'gray'"
            >
              <template #dot v-if="index === 0">
                <notification-outlined style="font-size: 16px;" />
              </template>
              <div class="timeline-content">
                <div>{{ activity.content }}</div>
                <div class="timeline-time">{{ activity.timestamp }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  LineChartOutlined, 
  UserOutlined, 
  ShoppingCartOutlined, 
  DollarOutlined,
  NotificationOutlined
} from '@ant-design/icons-vue'

const cards = ref([
  {
    title: '访问量',
    icon: LineChartOutlined,
    number: '12,789',
    text: '总访问量',
    type: 'visits'
  },
  {
    title: '用户数',
    icon: UserOutlined,
    number: '3,456',
    text: '总用户数',
    type: 'users'
  },
  {
    title: '订单数',
    icon: ShoppingCartOutlined,
    number: '8,123',
    text: '总订单数',
    type: 'orders'
  },
  {
    title: '收入',
    icon: DollarOutlined,
    number: '￥89,745',
    text: '总收入',
    type: 'income'
  }
])

const activities = ref([
  {
    content: '系统更新维护通知',
    timestamp: '2023-12-20 20:46'
  },
  {
    content: '新功能发布：数据分析模块上线',
    timestamp: '2023-12-19 18:30'
  },
  {
    content: '系统性能优化完成',
    timestamp: '2023-12-18 14:20'
  }
])
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  min-height: calc(100vh - 84px);
  border-radius: 8px;
}

.dashboard-row {
  margin-top: 20px;
}

.dashboard-card {
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
  
  &:hover {
    transform: translateY(-5px);
  }

  &.visits {
    background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
  }
  
  &.users {
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
  }
  
  &.orders {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  }
  
  &.income {
    background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    border-bottom: none;
    padding: 15px 20px;
    
    .anticon {
      font-size: 24px;
    }
  }
  
  .card-content {
    text-align: center;
    padding: 20px 0;
    
    .number {
      font-size: 32px;
      font-weight: bold;
      color: #ffffff;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .text {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}

.chart-card, .notice-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: none;
  
  .card-header {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 20px;
    font-weight: 600;
  }
}

.chart-container {
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: 0 0 8px 8px;
}

:deep(.ant-timeline) {
  padding: 16px 20px;
  
  .ant-timeline-item-head-gray {
    background-color: #e4e7ed;
  }
  
  .ant-timeline-item-head-blue {
    background-color: #1890ff;
  }
  
  .timeline-content {
    color: #606266;
  }
  
  .timeline-time {
    color: #909399;
    font-size: 12px;
    margin-top: 4px;
  }
}
</style>